<template>
  <div class="app-container d-flex">
    <div class="h-100 w-100 d-flex flex-wrap">
      <div class="h-2 w-2 p10" v-for="(item,index) in oneCardData" :key="index">
        <div v-if="isTwoCardType.indexOf(index) !== -1" class="h-100 w-100 item_border pl-2 pr-2">
          <div class="height-20 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center">
                <div class="status_point" :class="dataCardBgColor[oneCardStatusData[index].socketColor]"></div>
                <div class="font-14">{{cardTitle[index]}}</div>
              </div>
            </div>
          </div>
          <div class="height-80 d-flex flex-column justify-content-between">
            <div class="w-100" :class="(indexY==0||indexY==3||indexY==6)?'height-33 pt-1 pb-2':'height-0'"
                 v-for="(itemY,indexY) in item.deviceList" :key="indexY">
              <template v-if="indexY==0||indexY==3||indexY==6">
                <div class="h-100 w-100 d-flex align-items-center pr-3 item_bg_color2 borderRadius4 over-hidden">
                  <div class="d-flex-center h-100 font-white" style="width: 50px;font-size: 40px;" :class="twoCardDataBg[indexY].bgColor">
                    {{twoCardDataBg[indexY].unit}}
                  </div>
                  <div class="d-flex align-items-end justify-content-center flex-1">
                    <div class="content_value font-26 mr-1">{{itemY.deviceValue}}</div>
                    <div class="content_unit font-12">{{twoCardDataBg[indexY].unit2}}</div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div v-else class="h-100 w-100 item_border pl-2 pr-2">
          <div class="height-20 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center">
                <div class="status_point" :class="dataCardBgColor[oneCardStatusData[index].socketColor]"></div>
                <div class="font-14">{{cardTitle[index]}}</div>
              </div>
            </div>
          </div>
          <div class="height-80 d-flex flex-column flex-wrap">
            <div :class="(indexY!=6?'height-33 w-50':'height-0 width-0')" v-for="(itemY,indexY) in item.deviceList"
                 :key="indexY">
              <div v-if="indexY!=6" class="w-100 h-100" :class="oneCardDataBg[indexY].class">
                <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2" :class="oneCardDataBg[indexY].bgColor">
                  <div class="d-flex-center mr-2">
                    <el-image class="img_size_31" :src="oneCardDataBg[indexY].url" fit="cover"></el-image>
                  </div>
                  <div class="d-flex align-items-end justify-content-center">
                    <div class="content_value font-24 mr-1">{{itemY.deviceValue}}</div>
                    <div class="content_unit font-12">{{oneCardDataBg[indexY].unit}}</div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    queryOneListSunByNum,
    queryOneListSunByStatus,
  } from "@/api/solarEnergy/operationMonitor"

  export default {
    components: {},
    data() {
      return {
        timeout: [],

        isTwoCardType: [3, 4, 5, 14, 15, 16, 17],

        cardTitle: ['3号楼太阳能总控', '3号楼北空气能开关', '3号楼南空气能开关', '3号楼水箱控制器+循环泵开关', '3号楼水箱控制器开关', '1号楼继电器开关',
          '1号楼太阳能总控', '1号楼东1空气能开关', '1号楼东2空气能开关', '1号楼东3空气能开关', '1号楼东4空气能开关', '1号楼西1空气能开关',
          '1号楼西2空气能开关', '1号楼西3空气能开关', '1号楼南、北水箱+继电器开关', '1号楼南、北循环泵开关', '1号楼北水箱开关', '1号楼南水箱开关'],

        dataCardBgColor: ['item_bg_close', 'item_bg_open', 'item_bg_danger', 'item_bg_blue', 'item_bg_warning', 'bg-index-red', 'bg-index-orange'],

        oneCardData: [],
        oneCardStatusData: [],
        oneCardDataBg: [
          {url: require('@/assets/img/icon_A.png'), bgColor: 'border-warning-top', unit: 'V', class: 'pt-1 pr-2 pb-2'},
          {url: require('@/assets/img/icon_B.png'), bgColor: 'border-success-top', unit: 'V', class: 'pt-1 pr-2 pb-2'},
          {url: require('@/assets/img/icon_C.png'), bgColor: 'border-danger-top', unit: 'V', class: 'pt-1 pr-2 pb-2'},
          {url: require('@/assets/img/icon_A.png'), bgColor: 'border-warning-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
          {url: require('@/assets/img/icon_B.png'), bgColor: 'border-success-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
          {url: require('@/assets/img/icon_C.png'), bgColor: 'border-danger-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
          {url: require('@/assets/img/icon_C.png'), bgColor: 'border-danger-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
        ],
        twoCardDataBg: [
          {bgColor: 'item_bg_color_U', unit: 'U', unit2: 'V', class: 'pt-1 pr-2 pb-2'},
          {bgColor: 'item_bg_color_U', unit: 'U', unit2: 'V', class: 'pt-1 pr-2 pb-2'},
          {bgColor: 'item_bg_color_U', unit: 'U', unit2: 'V', class: 'pt-1 pr-2 pb-2'},
          {bgColor: 'item_bg_color_C', unit: 'C', unit2: 'A', class: 'pt-1 pr-2 pb-2'},
          {bgColor: 'item_bg_color_C', unit: 'C', unit2: 'A', class: 'pt-1 pl-2 pb-2'},
          {bgColor: 'item_bg_color_P', unit: 'P', unit2: 'kW', class: 'pt-1 pl-2 pb-2'},
          {bgColor: 'item_bg_color_P', unit: 'P', unit2: 'kW', class: 'pt-1 pl-2 pb-2'},
        ],
      }
    },
    created() {

    },
    mounted() {
      this.queryOneListSunByNum()
      this.queryOneListSunByStatus()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListSunByNum()
      }, 30000);

      this.timeout[1] = setInterval(() => {
        _this.queryOneListSunByStatus()
      }, 15000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListSunByNum() {
        queryOneListSunByNum().then(res => {
          let tempData = res.object
          this.oneCardData = tempData
        })
      },
      queryOneListSunByStatus() {
        queryOneListSunByStatus().then(res => {
          let tempData = res.object
          this.oneCardStatusData = tempData
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .height-80 {
    height: 80%;
  }

  .height-33 {
    height: 33.33%;
  }

  .height-20 {
    height: 20%;
  }

  .height-0 {
    height: 0%;
  }

  .width-0 {
    width: 0%;
  }

  .border-danger-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px #df547b inset;
  }

  .border-success-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(7, 193, 96, 0.83) inset;
  }

  .border-warning-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(254, 213, 47, 0.83) inset;
  }


  .status_point {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    margin-bottom: 2px;
  }

  .item_bg_open {
    background-color: #1AA652;
  }

  .item_bg_danger {
    background-color: #df547b;
  }

  .item_bg_close {
    background-color: #7A7A7A;
  }

  .item_bg_blue {
    background: #2C637A;
  }

  .item_bg_warning {
    background: #B3A12F;
  }

  .bg-index-red {
    background: #AF1F1F;
  }

  .item_bg_color2 {
    background-color: rgba(10, 52, 61, 0.62);
  }

  .item_bg_color_U {
    background-color: #c8a92b;
  }

  .item_bg_color_C {
    background-color: #2091b1;
  }

  .item_bg_color_P {
    background-color: #b04160;
  }

  .borderRadius4 {
    border-radius: 4px;
  }

  .content_value {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
  }

  .content_unit {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
    padding-bottom: 2px;
  }

  .img_size_31 {
    width: 31px;
    height: 31px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }
</style>
